iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

社畜轉行之旅,30天Kotlin學習筆記系列 第 10

Day 10 | 進階清單元件 - ViewHolder

  • 分享至 

  • xImage
  •  

View的重複利用

由於每一個項目都會有一個新的View,當項目增加時,View也會越來越多導致效能低落。

ViewHolder

藉由設計一個新類別來儲存View中的所有元件,並以畫面中可呈現的數量產生View實體,將資訊進行替換,以實現重複利用。

由於View是由Adapter產生,所以ViewHolder會設計在Adapter內。

Adapter產生View的過程

  1. 系統計算清單元件可容納的項目數量
  2. 呼叫getView()方法取得每個項目的View
  3. 當使用者滾動時,就會再呼叫getView()產生新的View

ViewHolder的設計邏輯

將滾動後產生的新View視為冗餘,只要把即將離開清單元件的View作為下一個即將進入清單元件的View的容器,並將內容替換,必免產生新的View,這樣的設計稱為「畫面複用」。

  1. 建立一個ViewHolder類別,裡面存放畫面的元件

    private class ViewHolder(v: View){
    	//連結畫面中的元件
    	val img_photo = v.findViewById<ImageView>(R.id.img_photo)
    	val tv_msg = v.findViewById<TextView>(R.id.tv_msg)
    }
    
  2. 改寫getView()方法

    override fun getView(position: Int,convertView: View?,parent: ViewGroup): View{
    	val view: View
    	val holder: ViewHolder
    
    	if (convertView == null){
    		//依據傳入Layout建立畫面
    		view = View.inflate(parent.context, layout, null)
    		holder = ViewHolder(view)
    		//為View加上標籤以重複使用
    		view.tag = holder
    } else {
    		holder = convertView.tag as ViewHolder
    		view = convertView
    }
    		//回傳此項目的畫面
    		return view
    }
    

上一篇
Day 9 | 清單元件類型
下一篇
Day 11 | 進階清單元件RecyclerView
系列文
社畜轉行之旅,30天Kotlin學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言